<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" media="(device-height: 568px)">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="../css/style.css" />

    <script type="text/javascript" src="../js/common/jquery-2.1.1.min.js"></script>
    <script src="../js/common/swiper.jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/common/jquery.SuperSlide.2.1.1.js"></script>
    <script src="../js/common/js.js" type="text/javascript"></script>
    <script src="../js/companyLists.js" type="text/javascript"></script>
    <style type="text/css">
        .comList:not(:last-of-type) {
            border-bottom: 1px solid rgb(230, 230, 230)
        }

        .searchInput {
            width: 100%;
            position: absolute;
            left: 0;
            top: .4rem;
            height: .8rem;
            display: flex;
            align-items: center;
            background: white;
            display: none;
        }

        .inputBtn {
            flex: 1;
        }

        .inputBtn>input {
            height: .6rem;
            width: 5rem;
            border: none;
        }

        .searchIcon {
            margin-right: .25rem;
        }

        .areaLists a {
            width: .64rem;
            overflow: hidden;
        }

        .areaLists a:nth-of-type(6n) {
            margin-right: 0;
        }

        .d3 {
            display: none;
        }

        .childBtn {
            display: none;
        }
    </style>
</head>

<body style="background:#fff;">
    <!-- 顶部 -->
    <div class="header">
        <a href="fox://setBack" class="hele"></a>
        <h1 class="hetitle">店铺名</h1>
        <a href="javascript:;" class="helr searchBtn"><img class="shareIcon" src="../img/search.png" alt=""></a>
        <div class="searchInput">
            <div class="inputBtn"><input type="text" placeholder="请输入要搜索的内容"></div><img class="shareIcon searchIcon" src="../img/search.png" alt="">
        </div>
    </div>
    <!-- 搜索结果内容 -->
    <div id="page" class="page m2">
        <!-- 综合、地区 -->
        <ul class="h88 tab">
            <!-- 分类 -->
            <li class="tabItem typeBtn" onclick="dialog('#d1')" style="color:#ff5203;" data-num="1">
                <div class="rightLine">
                    <span class="category">分类</span>
                    <img src="../img/grayBottom.png">
                </div>
            </li>
            <!-- 水暖子分类 -->
            <li class="tabItem childBtn" onclick="dialog('#d3')" data-num="1">
                <div class="rightLine">
                    <span class="childCategory">分类</span>
                    <img src="../img/grayBottom.png">
                </div>
            </li>
            <!-- 地区 -->
            <li class="tabItem cityBtn" onclick="dialog('#d2')" data-num="1">
                <div>
                    <span class="area">地区</span>
                    <img src="../img/grayBottom.png" alt="">
                </div>
            </li>
        </ul>
        <!-- 企业 -->
        <div class="comLists"></div>

        <p class="notMore">别拉了 - 疼</p>

    </div>

    <!-- 综合下拉遮罩 -->
    <div class="mask" onclick="closeModel()"></div>
    <!--弹窗-->
    <div class="dialog" id="d1" style="height:initial">
        <div class="classifyLists p30">
        </div>
    </div>
    <div class="dialog" id="d2" style="height:initial">
        <div class="colorList areaLists">
        </div>
    </div>
    <div class="dialog" id="d3" style="height:initial">
        <div class="letter26 p30">
        </div>
    </div>
    <!-- 地区 -->
    <input type="hidden" class="city_area" data-area_code="">
    <!-- 综合 -->
    <input type="hidden" class="cat_name" data-cat_name="" data-cat_childname="">
    <!-- cat_id -->
    <input type="hidden" class="cat_id" data-cat_id="">
    <!-- keys -->
    <input type="hidden" class="keys" data-keywords="">

    <!-- 图片放大 -->
    <div class="dialog" id="plusImg" onclick="dialogClose()">
        <div class="dialog_wrap dialog_content" style="background:transparent;">
            <img class="showImg" src="../img/user.jpg" alt="">
        </div>
    </div>
</body>
<script type="text/javascript">
    function closeModel() {
        dialogClose();
        $(".tabItem").removeClass("on").attr("data-num", 1);
    }
    $(function() {
        if (isIphoneX()) {
            $('.mask').css('top', '2.56rem');
            $('.dialog').css('top', '2.56rem');
        } else {
            $('.mask').css('top', '2.08rem');
            $('.dialog').css('top', '2.08rem');
        }
        //次导航翻转效果
        $(".tab .tabItem").on("click", function() {
            $(this).css("color", "#ff5203").siblings(".tabItem").css("color", "#333");
            let num = $(this).attr("data-num");
            if (num == 1) {
                $(this).addClass("on").siblings(".tabItem").removeClass("on");
                $(this).attr("data-num", 2).siblings(".tabItem").attr("data-num", 1);
                return;
            } else {
                $(this).attr("data-num", 1).removeClass('on');
                dialogClose();
            }
        })
    })

    // 显示搜索框
    $('.searchBtn').on('click', function() {
        $('.searchInput').css('display', 'flex');
    })

    //弹窗取消按钮高度
    // $(document).on('click', function() {
    //     console.log($('.mask').css('display') == 'block');
    //     dialogClose();
    //     $('.mask').css('top', '2.08rem');
    //     $('.mask').css('background', 'rgba(0,0,0,.4)');
    //     $(".tabItem").attr("data-num", 1).removeClass("on");
    // })

    //防止冒泡
    // $(document).on('click', ".tabItem", function(event) {
    //     event.stopPropagation();
    // });
    // $(document).on('click', ".cityItem", function(event) {
    //     event.stopPropagation();
    // });

    // 图片放大
    $(document).on('click', '.plusImg', function(e) {
        e.stopPropagation();
        let img = $(this).attr('data-url');
        $('.showImg').attr('src', img);
        $('.mask').css('background', 'black');
        dialog('#plusImg');
        $('.mask').css('z-index', '1001');
        $('.mask').css('top', '0');
    })
</script>

</html>